<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>index</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
		<link rel="shortcut icon" href="images/favicon.png">
		<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
		<link href="jqueryMobile/jquery.mobile.theme-1.3.1.css" rel="stylesheet">
		<link href="jqueryMobile/jquery.mobile.structure-1.3.1.css" rel="stylesheet">
		<link href="jqueryMobile/jquery.mobile-1.3.1.css" rel="stylesheet">
		<link rel="stylesheet" href="css/main.css">
		<script>window.$ = window.jQuery = WLJQ;</script>
		<script src="jqueryMobile/jquery.mobile-1.3.1.js"></script>
				
        <link rel="stylesheet" href="js/photoswipe.css" />        
        <script src="js/klass.min.js"></script>            
        <script src="js/code.photoswipe.jquery-3.0.4.min.js"></script>
	</head>
	<body style="display: none;">
    <div data-role="page" id="loginPage">
		<div data-role="content" style="padding: 15px">
	        <div style="padding:10px 20px;">
	            <h3>Please sign in</h3>
	            <label for="un" class="ui-hidden-accessible">License Plate:</label>
	            <input type="text" name="user" id="surveyorIdInp" value="" placeholder="Surveyor Id" data-theme="a">
	            <label for="pw" class="ui-hidden-accessible">Password:</label>
	            <input type="password" name="pass" id="passwordInp" value="" placeholder="Password" data-theme="a">
	            <button id="loginBtn" data-theme="b" data-icon="check">Log in</button>
	        </div>	
    	</div>
    </div>
	<div data-role="page" id="surveyorInfoPage">
		<div data-role="header" id="header0" data-position="fixed">
			<h3>Easy Claim</h3>
			<a href="#loginPage" data-role="button" id="logoutBtn" class="ui-btn-right">Logout</a>
		</div>
		<div data-role="content" style="padding: 15px">
			<div class="ui-bar ui-bar-b">
	    		<h3>Surveyor Information</h3>
			</div>
			<div data-role="fieldcontain">
		         <img id="surveyorImageInfo" src='' alt="surveyor's image" width='290px' style='display:block'/>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="survayorIdInfo">Suveyor Id:</label>
		         <input type="text" data-mini="true" name="survayorIdInfo" id="survayorIdInfo" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="nameInfo">Name:</label>
		         <input type="text" data-mini="true" name="nameInfo" id="nameInfo" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="mobileInfo">Mobile:</label>
		         <input type="text" data-mini="true" name="mobileInfo" id="mobileInfo" value="" readonly>
		         <!-- Call <a href='tel:0858056696'>call</a>-->
		         <a data-role="button" data-inline="true" id="telephoeBtn">
               			<img src='images/camera.png' alt="location" width="10"/>
           		 </a>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="statusBtnInfo">Status:</label>
				 <select name="statusBtnInfo" id="statusBtnInfo" data-role="slider">
				 	<option value="true">Avail</option>
					<option value="false">Busy</option>
				 </select>
    		</div>
		</div>
		<div data-role="footer" data-position="fixed">
			<div data-role="navbar">
				<ul>
					<li><a href="#surveyorInfoPage" class="uibtn-active">Home</a></li>
					<li><a href="#jobPreviewPage">Job Preview</a></li>
					<!-- <li><a href="#viewCarImagePage">Capture</a></li>-->
					<li><a href="#jobDetailPage">Job Detail</a></li>
					<li><a href="#captureImagePage">CaptureImage</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div data-role="page" id="jobPreviewPage">
		<div data-role="header" id="header1" data-position="fixed">
			<h3>EasyClaim</h3>
			<a href="#loginPage" data-role="button" id="logoutBtn" class="ui-btn-right">Logout</a>
		</div>
		<div data-role="content" style="padding: 15px">
			<div class="ui-bar ui-bar-b">
	    		<h3>Job Preview</h3>
			</div>
			
			<div class="capturedImage"  id="capturedImage" style="text-align: center;">				
				<img id='carImagePreview' src='images/captureimage.png' width='290px' style='display:block'>
			</div>
			
			<div data-role="fieldcontain">
		         <label for="licenseplatePreview">License Plate:</label>
		         <input type="text" data-mini="true" name="licenseplatePreview" id="licenseplatePreview" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="customernamePreview">Customer Name:</label>
		         <input type="text" data-mini="true" name="customernamePreview" id="customernamePreview" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="cardetailPreview">Car Detail:</label>
		         <input type="text" data-mini="true" name="cardetailPreview" id="cardetailPreview" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="customermobilePreview">Customer Mobile:</label>
		         <input type="text" data-mini="true" name="customermobilePreview" id="customermobilePreview" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="accDatePreview">Accident Date:</label>
		         <input type="text" data-mini="true" name="accDatePreview" id="accDatePreview" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="accLocationPreview">Accident Date:</label>
		         <input type="text" data-mini="true" name="accLocationPreview" id="accLocationPreview" value="" readonly>
    		</div>

			
			<div class="ui-grid-a">
				<div class="ui-block-a">
					<input id="acceptBtnPreview" type="submit" value="Accept" />
				</div>
				<div class="ui-block-b">
					<input id="denyBtnPreview" type="button" value="Deny" />
				</div>
			</div>
		</div>
		<div data-role="footer" data-position="fixed">
			<div data-role="navbar">
				<ul>
					<li><a href="#surveyorInfoPage">Home</a></li>
					<li><a href="#jobPreviewPage" class="uibtn-active">Job Preview</a></li>
					<!-- <li><a href="#viewCarImagePage">Capture</a></li>-->
					<li><a href="#jobDetailPage">Job Detail</a></li>
					<li><a href="#captureImagePage">CaptureImage</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div data-role="page" id="denyJobPage">
		<div data-role="header" id="header2" data-position="fixed">
			<a href="#jobPreviewPage" data-role="button" data-transition="slide" data-direction="reverse" id="cancelPicBtn" data-theme='a' data-corners="true" data-icon="back">Back</a>
			<h3>Easy Claim</h3>
		</div>
		<div data-role="content" style="padding: 15px">
			<div class="ui-bar ui-bar-b">
	    		<h3>Deny Job</h3>
			</div>
			
			<div data-role="fieldcontain">
		         <label for="resonDeny">Reason:</label>
		         <textarea cols="40" rows="8" name="resonDeny" id="resonDeny"></textarea>
    		</div>
			
			<div style="text-align: center;">
				<a data-role="button" data-inline="true" id="denyBtn">
                	send
            	</a>
			</div>
		</div>
	</div>

	<div data-role="page" id="jobDetailPage">
		<div data-role="header" id="header3" data-position="fixed">
			<h3>Easy Claim</h3>
			<a href="#loginPage" data-role="button" id="logoutBtn" class="ui-btn-right">Logout</a>
		</div>
		<div data-role="content" style="padding: 15px">
			<div class="ui-bar ui-bar-b">
	    		<h3>Job Detail</h3>
			</div>
			
			<div class="capturedImage"  id="capturedImage" style="text-align: center;">				
				<img id='carImageDetail' src='images/captureimage.png' width='290px' style='display:block'>
			</div>
			
			<div data-role="fieldcontain">
		         <label for="licenseplateDetail">License Plate:</label>
		         <input type="text" data-mini="true" name="licenseplateDetail" id="licenseplateDetail" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="customernameDetail">Customer Name:</label>
		         <input type="text" data-mini="true" name="customernameDetail" id="customernameDetail" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="cardetailDetail">Car Detail:</label>
		         <input type="text" data-mini="true" name="cardetailDetail" id="cardetailDetail" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="customermobileDetail">Customer Mobile:</label>
		         <input type="text" data-mini="true" name="customermobileDetail" id="customermobileDetail" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="accDateDetail">Accident Date:</label>
		         <input type="text" data-mini="true" name="accDateDetail" id="accDateDetail" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="accLocationDetail">Accident Date:</label>
		         <input type="text" data-mini="true" name="accLocationDetail" id="accLocationDetail" value="" readonly>
    		</div>
			
			<div class="ui-grid-a">
				<div class="ui-block-a" style="text-align: center;">
					<a data-role="button" data-inline="true" id="LocationBtn">
               			<img src='images/location.png' alt="location" width="50"/>
           			</a>
				</div>
				<div class="ui-block-b" style="text-align: center;">
					<a href="#captureImagePage" data-role="button" data-inline="true" id="captureImageBtn">
               			<img src='images/camera.png' alt="location" width="50"/>
           			</a>
				</div>
			</div>
			
		</div>
		<div data-role="footer" data-position="fixed">
			<div data-role="navbar">
				<ul>
					<li><a href="#surveyorInfoPage">Home</a></li>
					<li><a href="#jobPreviewPage">Job Preview</a></li>
					<!-- <li><a href="#viewCarImagePage">Capture</a></li>-->
					<li><a href="#jobDetailPage" class="uibtn-active">Job Detail</a></li>
					<li><a href="#captureImagePage">CaptureImage</a></li>
				</ul>
			</div>
		</div>
	</div>
	
	<div data-role="page" id="captureImagePage">
		<div data-role="header" id="header2" data-position="fixed">
			<h3>Easy Claim</h3>
			<a href="#jobDetailPage" data-role="button" id="BackCaptureBtn">Back</a>
		</div>
		<div data-role="content" style="padding: 0px">
			
			<div class="capturedImage" style="text-align: center;">				
				<img id="carImageView" src='images/captureimage.png'  style="display:block;max-width: 100%">
			</div>
			
		</div>
		<div data-role="footer" data-position="fixed" >
			<div data-role="navbar">
			    <div class="ui-grid-b">
	                <div class="ui-block-a" style="text-align: left;">
	                	<a id="carImageBtn"><img src='images/captureimage.png' alt="accident photo" width="30"/></a>
	                </div>
	                <div class="ui-block-b" style="text-align: center;">
	                	<a id="takePhotoBut"><img src='images/takephoto.png' alt="take photo button" width="30"/></a>
	                </div>
	                <div class="ui-block-c" style="text-align: right;">
	                	<a id="claimDocImageBtn"><img src='images/document.png' alt="accident document" width="30"/></a>
	                </div>                
            	</div>
			</div>
		</div>
	</div>
	
	<div data-role="page" id="viewCarImagePage">
		<div data-role="header" id="header2" data-position="fixed">
			<h3>Easy Claim</h3>
			<a href="#jobDetailPage" data-role="button" data-transition="slide" data-direction="reverse" id="BackCaptureBtn">Back</a>
		</div>
		<div data-role="content" style="padding: 0px">
		
			<div id="Gallery" class="gallery">
			</div>
		</div>
		<div data-role="footer" data-position="fixed" >
			<div data-role="navbar">
			    <div class="ui-grid-b">
	                <div class="ui-block-a" style="text-align: left;">
	                	<a id="carImageBtn"><img id="carImage" src='images/captureimage.png' alt="accident photo" width="30"/></a>
	                </div>
	                <div class="ui-block-b" style="text-align: center;">
	                	<a id="takePhotoBtn"><img src='images/takephoto.png' alt="take photo button" width="30"/></a>
	                </div>
	                <div class="ui-block-c" style="text-align: right;">
	                	<a id="claimDocImageBtn"><img id="claimDocImage" src='images/document.png' alt="accident document" width="30"/></a>
	                </div>                
            	</div>
			</div>
		</div>
	</div>
	
	<div data-role="page" id="viewClaimDocPage">
		<div data-role="header" id="header2" data-position="fixed">
			<h3>Easy Claim</h3>
			<a href="#jobDetailPage" data-role="button" data-transition="slide" data-direction="reverse" id="BackCaptureBtn">Back</a>
		</div>
		<div data-role="content" style="padding: 0px">
		
			<div class="capturedImage" style="text-align: center;">				
				<img id="claimDocImageView" src='images/captureimage.png'  style="display:block;max-width: 100%">
			</div>
		</div>
		<div data-role="footer" data-position="fixed" >
			<div>
				<div class="ui-grid-b">
	                <div class="ui-block-a" style="text-align: left;">
	                	<label></label>
	                </div>
	                <div class="ui-block-b" style="text-align: center;">
	                	<button id="sendClaimDocBtn" data-theme="b" data-icon="check">Send</button>
	                </div>
	                <div class="ui-block-c" style="text-align: right;">
	                	<label id="claimDocIdText">No : xxxx</label>
	                </div>                
            	</div>
			</div>
			<div data-role="navbar">
			    <div class="ui-grid-b">
	                <div class="ui-block-a" style="text-align: left;">
	                	<a id="carImageBtn"><img src='images/captureimage.png' alt="accident photo" width="30"/></a>
	                </div>
	                <div class="ui-block-b" style="text-align: center;">
	                	<a id="takePhotoBut"><img src='images/takephoto.png' alt="take photo button" width="30"/></a>
	                </div>
	                <div class="ui-block-c" style="text-align: right;">
	                	<a id="claimDocImageBtn"><img src='images/document.png' alt="accident document" width="30"/></a>
	                </div>                
            	</div>
			</div>
		</div>
	</div>
	
	<script src="js/initOptions.js"></script>
    <script src="js/main.js"></script>
    <script src="js/messages.js"></script>
    </body>
</html>